<script>
import axios from "axios";
import http from "@/api/http";
export default {
  name: "ProjectDoing",
  methods:{
    getinfo(){
      http.get("/api/projects/ongoing")
          .then(res=>{
            this.tableData=res;
            console.log(res)
          })
    },
    searchOngoing(){
      http.get("/api/projects/ongoing/search?keyword="+this.input2)
          .then(res=>{
            this.tableData=res;
            console.log('Search ongoing project: ',res)
          })
    }
  },
  created(){
    this.getinfo()
  },
  data() {
    return {
      input2:'',
      parentsCloums: [ //外层table的表头
        {
          name: "项目名称",
          propName: "projectName",
        }, {
          name: "合同额",
          propName: "contractAmount",
        }, {
          name: "重要程度",
          propName: "importantLevel",
        },{
          name: "预算",
          propName: "budget",
        },{
          name: "项目类别型",
          propName: "projectType",
        },

      ],
      tableData: [], //外层table的数据
    }
  }
}
</script>

<template>
  <div class="shopList">
    <div style="display: flex;justify-content: space-between;align-items: center;">
      <div></div>
      <div></div>
      <div style="width: 200px;margin-right: 80px">
        <el-input
            placeholder="请输入项目名"
            prefix-icon="el-icon-search"
            v-model="input2"
            @keyup.enter.native="searchOngoing">
        </el-input>
      </div>
    </div>
    <el-table :data="tableData" style="width: 100%">
      //对外层的表格表头进行了遍历循环
      <el-table-column
          v-for="(value, key, index) in parentsCloums "
          :label="value.name"
          :prop="value.propName"
          :key="index"
      >
      </el-table-column>
      <el-table-column
          label="进度"
          prop="taskProgress"
      >
        <template slot-scope="scope">
          <el-progress
              type="line"
              :stroke-width="15"
              :percentage=scope.row.taskProgress
          ></el-progress>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<style>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
.add-button{
  color: white;
  background: cornflowerblue;
  height: 50px;
  width:180px;
  border-radius: 25px;
  margin:10px;
  font-size: 20px;
  border: 0px;
}
</style>
